<template>
    <view class="page-see-demand">
        <view style="height: 1upx;"></view>
        <view class="page-list">
            <!-- 列表组件 -->
            <block v-for="(item,index) in listData.list" :key="index">
                <trade-item :data="item" :params="params" @OnQuote="onQuote" :optionMethod="callQoute" @OnseeInfo="OnseeInfo" infoIcon="../../static/ibs/img_comm_closed.png" ></trade-item>
            </block>
        </view>
        <view class="no-result" v-if="noData">
            <image src="../../static/ibs/img_home_empty.png"  mode="aspectFill"/>
            <text>暂无查看的求购</text>
        </view>
        <!-- 加载更多组件 -->
        <load-more  :loadingType="loadingType" :showImage="showImage" :contentText="contentText"></load-more>
        <!-- 报价弹层 -->
        <quote-box v-if="isShowQuoteBox"  @closeInfo="closeInfo" :id="quoteId"  remoteUrl="/wechat/demand/addQuote"></quote-box>
    </view>
</template>
<script type="text/ecmascript-6">
import tradeItem from '@/components/ibs/tradeItem.vue';
import loadMore from '@/components/uni-load-more.vue'  //调用列表上拉更新数据组件
import quoteBox from '@/components/form/quoteBox.vue'  //报价弹层
import api from '@/common/api.js';   //请求API方法
import sysEnum from '@/common/sysEnum.js';
import publicMethod from '@/common/publicMethod.js';
import {wxSetting} from '../../common/wxApi.js';
export default {
    components: {
        tradeItem,
        loadMore,
        quoteBox
    },
    data() {
        return {
            searchValue: null, //搜索值
            toView: 'red',
            isShowClear: false,  //清除按钮
            scrollTop: 100,
            showImage: true,
            loadingType: 0,
            isShowInfoBox: false,  //完善资料框
            isShowQuoteBox: false, //报价弹层
            quoteId: null, //报价ID
            isShowpayBox: false, //微信支付弹窗
            systemInfo: {
                windowWidth: 0,
                windowHeight: 0,
                pixelRatio: 0
            },
            contentText: {
                contentdown: "",
                contentrefresh: "正在加载...",
                contentnomore: "没有更多数据了"
            },
            currentScrollTop: 0,
            scrollHeight: '',
            isSearchflxed: false,
            bannerHeight: 346,
            params: [
                {
                    label: '采购意向价格',
                    key: 'intentPrice'
                },
                {
                    label: '买家联系方式',
                    key: 'contactMobileNo'
                },
                {
                    label: '要求',
                    key: 'remarkDemand'
                }
            ],
            listData: {
                "list": [
                ],
                currentPage: 1,
                total: 0
            },
            noData: null, // 是否没有数据
            hasMore: false // 判断是否还有更多数据
        };
    },
    onPullDownRefresh() {
        this.hasMore = false;
        this.noData = false;
        this.loadingType = 0;
        this.getData();
    },
    onReachBottom() {
        if (this.loadingType !== 0) {
            return;
        }
        if (this.noData) {
            return;
        }
        if (!this.hasMore && this.listData.currentPage === 1) { // 如果当前也是第一页且没有更多数据了则禁止上拉
            return;
        }
        if (!this.hasMore && this.listData.currentPage > 1) { // 如果当前页数不是第一页且没有更多数据了则显示没有已全部加载完成
            this.loadingType = 2;
            return;
        }
        if (this.hasMore) {
            this.loadingType = 1;
        }
        setTimeout(() => {
            this.addData();
        }, 1200);
    },
    onLoad() {
        this.sysInfo();
        this.getData();
    },
    //页面滚动事件
    onPageScroll(e) {
        let that = this;
        console.log("高度===", that.systemInfo.windowWidth);
        console.log("pixelRatio===", that.systemInfo.pixelRatio);
        that.currentScrollTop = e.scrollTop * that.systemInfo.pixelRatio;
        console.log("that.currentScrollTop===", that.currentScrollTop)
        if (that.currentScrollTop > that.bannerHeight) {
            that.isSearchflxed = true;
        } else {
            that.isSearchflxed = false;
        }

    },
    methods: {
        //获取页面基础信息
        sysInfo(){
            let that = this;
            uni.getSystemInfo({
                success: function (res) {
                    that.systemInfo.windowWidth = res.windowWidth;
                    that.systemInfo.windowHeight = res.windowHeight;
                    that.systemInfo.pixelRatio = res.pixelRatio;
                    that.scrollHeight = 'height:' + that.systemInfo.windowHeight * that.systemInfo.pixelRatio + "upx";
                    console.log("that.scrollHeighte====", that.scrollHeight);
                }
            });

        },
        /**
         * 搜索结果回调函数
         * @param data 搜索结果数据
         */
        searchData(data) {
            console.log('searchData----------------: ' + JSON.stringify(data));
        },
        //初始化获取数据 及搜索访求
        getData(){
            let that = this;
            //调用请求数据方法
            var url = "/wechat/user/listDemands";   //请求的URL
            api.httpRequest(url, {pageNum: 1}, "POST").then((res) => {
                if (res.code !== 200) {
                    that.showToast(res.message);
                    return;
                }
                that.listData.list = res.result.list;   //获取列表数据
                that.listData.currentPage = res.result.pageNum;   //获取当前页
                that.listData.total = res.result.total;  //获取总页数，加载更多会用到
                if(res.result.list.length == 0 && res.result.total == 0) {
                    that.noData = true;
                }
                if (res.result.list.length > 0) {
                    that.noData = false;
                }
                console.log('getData----------------that.noData: ' + that.noData);
                that.hasMore = res.result.hasNextPage;
            });
        },
        /*
         滑到最底部时触发（上拉更多）方法
         */
        async addData() {
            if (this.listData.list.length >= this.listData.total) {  //当前页面中的数据列表大于或者等于数据库中total时，直接返回
                this.loadingType = 2;
                return;
            } else {
                let that = this;
                this.loadingType = 1;  //状态加载中
                var url = "/wechat/user/listDemands";   //请求地址
                var params = {
                    pageNum: this.listData.currentPage + 1    //传请求的页数,
                };
                await  api.httpRequest(url, params, "post").then((res) => {
                    if (res.code !== 200) {
                        that.showToast(res.message);
                        return;
                    }
                    that.listData.list = that.listData.list.concat(res.result.list);
                    that.listData.currentPage = res.result.pageNum;
                    that.listData.total = res.result.total;  //获取总页数，加载更多会用到
                    that.hasMore = res.result.hasNextPage;
                    this.loadingType = 0;
                });
            }
        },
        //拨打电话/查看价格信息的回调函数
        callQoute(data) {
            console.log('callQoute---data: ' + JSON.stringify(data));
            this.callQouteFn(data)

        },
        //报价弹窗
        onQuote(data) {
            console.log('seeDemand----->id:' + data);
            this.isShowQuoteBox = true;
            this.quoteId = data.id;
        },
        //关闭报价窗口
        closeInfo(val){
            if(val=="quoteBox"){
                this.isShowQuoteBox=false; //关闭报价弹窗口
            }
        }
    }
};
</script>
<style>

    page {
        height: 100%;
    }

    .page-see-demand {
        height: 100%;
        width: 100%;
        background:#f2f2f5;
    }
    .page-see-demand .page-list {
        margin-left: 24upx;
        margin-right: 24upx;
    }

    .page-see-demand .no-result{
        background: #f5f6f7;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        overflow: hidden;
        position: fixed;

    }
    .page-see-demand .no-result image{
        width: 200upx;
        height: 200upx;
        display: block;
        margin:0 auto;
        margin-top:32vh;
    }
</style>
